<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <!-- 订单信息 -->
    <el-card class="box-card">
      <div class="divflex">
        <div>
          <span>订单编号: <span class="one">{{ detail.id }}</span></span>
        </div>
        <div>
          <span>运单编号: <span class="one">{{ detail.transportOrder.id }}</span></span>
        </div>
        <div>
          <span>下单时间: <span class="one">{{ detail.createTime }}</span></span>
        </div>
        <div>
          <span>订单状态: <span class="one">{{ formatter(detail.status) }}</span></span>
        </div>
        <div class="dlast">
          <span>预计到达日期: <span class="one">{{ detail.estimatedArrivalTime }}</span></span>
        </div>
      </div>
    </el-card>
    <!-- 发货收货方基本信息 -->
    <div class="cardtwo">
      <el-collapse
        v-model="activeNames"
        :default-active="true"
      >
        <el-collapse-item
          title="基本信息"
          name="1"
          consistency
        >
          <div class="d1">
            <img src="../../assets/position.png" />
            发货人
            <el-row class="elrowone">
              <el-col
                :span="8"
              ><div class="grid-content bg-purple">
                发货方姓名: {{ detail.senderName }}
              </div></el-col>
              <el-col
                :span="8"
              ><div class="grid-content bg-purple-light">
                发货方电话: {{ detail.senderPhone }}
              </div></el-col>
            </el-row>
            <el-row>
              <el-col
                :span="8"
              ><div class="grid-content bg-purple">
                发货方地址:
                {{
                  detail.senderProvince.name +
                    detail.senderProvince.name +
                    detail.senderCounty.name
                }}
              </div></el-col>
              <el-col
                :span="8"
              ><div class="grid-content bg-purple-light">
                详细地址: {{ detail.senderAddress }}
              </div></el-col>
            </el-row>
          </div>
          <div class="d2">
            <img src="../../assets/shouhuo.png" />
            收货人
            <el-row class="elrowone">
              <el-col
                :span="8"
              ><div class="grid-content bg-purple">
                收货方姓名: {{ detail.receiverName }}
              </div></el-col>
              <el-col
                :span="8"
              ><div class="grid-content bg-purple-light">
                收货方电话: {{ detail.receiverPhone }}
              </div></el-col>
            </el-row>
            <el-row>
              <el-col
                :span="8"
              ><div class="grid-content bg-purple">
                收货方地址:
                {{
                  detail.receiverProvince.name +
                    detail.receiverCounty.name +
                    detail.receiverCity.name
                }}
              </div></el-col>
              <el-col
                :span="8"
              ><div class="grid-content bg-purple-light">
                详细地址: {{ detail.receiverAddress }}
              </div></el-col>
            </el-row>
          </div>
          <div>
            <img src="../../assets/juli.png" />
            距离 : {{ detail.distance }}km
            <div>
              <el-row class="elrowone">
                <el-col
                  :span="24"
                ><div class="grid-content bg-purple">
                  备注: {{ detail.mark === null ? '暂无' : detail.mark }}
                </div></el-col>
              </el-row>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 订单跟踪 -->
    <div class="cardthree">
      <el-collapse
        v-model="activeNames"
        :default-active="true"
      >
        <el-collapse-item
          title="订单跟踪"
          name="2"
          consistency
        >
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 订单轨迹 -->
    <div class="cardfour">
      <el-collapse
        v-model="activeNames"
        :default-active="true"
      >
        <el-collapse-item
          title="订单轨迹"
          name="3"
          consistency
        >
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 取件信息 -->
    <div class="cardfive">
      <el-collapse
        v-model="activeNames"
        :default-active="true"
      >
        <el-collapse-item
          title="取件信息"
          name="5"
          consistency
        >
          <div class="qjxx">
            <div>
              <span>所在网点:</span>
              <span>{{ detail.taskPickup.agency.name }}</span>
            </div>
            <div>
              <span>取件类型:</span>
              <span>{{
                detail.pickupType === 0 ? '网点自寄' : '上门取件'
              }}</span>
            </div>
            <div>
              <span>作业状态:</span>
              <span>{{ status(detail.taskPickup.status) }}</span>
            </div>
            <div>
              <span>取件快递员:</span>
              <span>{{ detail.taskPickup.courier.name }}</span>
            </div>
            <div>
              <span>快递员电话:</span>
              <span>{{ detail.taskPickup.courier.mobile }}</span>
            </div>
            <div>
              <span>预计取件时间:</span>
              <span>{{ detail.taskPickup.estimatedStartTime }}</span>
            </div>
            <div>
              <span>取件完成时间:</span>
              <span>{{ detail.taskPickup.estimatedEndTime }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 费用信息 -->
    <div class="cardsix">
      <el-collapse
        v-model="activeNames"
        :default-active="true"
      >
        <el-collapse-item
          title="费用信息"
          name="6"
          consistency
        >
          <div class="fyxx">
            <div>
              <span>运费:</span>
              <span><span class="money">{{ detail.amount }}</span>元</span>
            </div>
            <div>
              <span>支付方式:</span>
              <span>{{
                detail.pickupType === 0 ? '网点自寄' : '上门取件'
              }}</span>
            </div>
            <div>
              <span>付款状态:</span>
              <span>{{ status(detail.taskPickup.status) }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 货品信息 -->
    <div class="cardseven">
      <el-collapse
        v-model="activeNames"
        :default-active="true"
      >
        <el-collapse-item
          title="货品信息"
          name="7"
          consistency
        >
          <el-table
            :data="detail.orderCargoDTOS"
            style="width: 100%"
            show-summary
          >
            <el-table-column
              type="index"
              label="序号"
              width="66px"
            >
            </el-table-column>
            <el-table-column
              label="货品名称"
              width="180"
              prop="name"
            >
              <template #default="{ row }">
                <!-- 条件判断 -->
                <el-input
                  v-if="row.isEdit"
                  v-model="row.editRow.name"
                  size="mini"
                />
                <span
                  v-else
                  @click="rowss(row)"
                >{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="货品类型"
              width="180"
            >
              <template #default="{ row }">
                <!-- 条件判断 -->
                <el-input
                  v-if="row.isEdit"
                  v-model="row.editRow.goodsTypename"
                  size="mini"
                />
                <span
                  v-else
                  @click="rowss(row)"
                >{{ row.goodsType.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalWeight"
              label="重量(千克)"
            >
              <template #default="{ row }">
                <!-- 条件判断 -->
                <el-input
                  v-if="row.isEdit"
                  v-model="row.editRow.totalWeight"
                  size="mini"
                />
                <span
                  v-else
                  @click="rowss(row)"
                >{{ row.totalWeight }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalVolume"
              label="体积(立方)"
            >
              <template #default="{ row }">
                <!-- 条件判断 -->
                <el-input
                  v-if="row.isEdit"
                  v-model="row.editRow.totalVolume"
                  size="mini"
                />
                <span
                  v-else
                  @click="rowss(row)"
                >{{ row.totalVolume }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
            >
              <template #default="{ row }">
                <template v-if="row.isEdit">
                  <el-button
                    type="text"
                    size="small"
                    @click="save(row)"
                  >
                    保存
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    style="color: #f78989"
                    @click="cancel(row)"
                  >
                    取消
                  </el-button>
                </template>
                <template v-else>
                  <el-button
                    type="text"
                    size="small"
                    @click="edit(row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    style="color: #f78989"
                    @click="del(row)"
                  >
                    删除
                  </el-button>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { orderDetail } from '@/api/order'
import { carGoDel } from '@/api/cargo'
export default {
  data() {
    return {
      detail: {},
      activeNames: ['1', '2', '3', '4', '5', '6', '7']
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    }
  },
  created() {
    this.getorderDetail()
  },
  methods: {
    async getorderDetail() {
      const res = await orderDetail(this.id)
      console.log(res)
      this.detail = res.data
      this.detail.orderCargoDTOS.forEach(item => {
        this.$set(item, 'isEdit', false)
        this.$set(item, 'editRow', {
          name: item.name,
          goodsTypename: item.goodsType.name,
          totalWeight: item.totalWeight,
          totalVolume: item.totalVolume
        })
      })
    },
    // 作业状态
    status(st) {
      if (st === 1) {
        return '新任务'
      } else if (st === 2) {
        return '已完成'
      } else {
        return '已取消'
      }
    },
    // 编辑
    edit(row) {
      row.isEdit = true
      row.editRow.name = row.name
      row.editRow.goodsTypename = row.goodsType.name
      row.editRow.totalWeight = row.totalWeight
      row.editRow.totalVolume = row.totalVolume
    },
    // 取消
    cancel(row) {
      row.isEdit = false
    },
    // 保存
    async save(row) {
      console.log(row)
      // await carGoEdit({
      //   cargoBarcode: row.cargoBarcode,
      //   cargoValue: row.cargoValue,
      //   goodsTypeId: row.goodsType.id,
      //   id: row.id,
      //   name: row.name,
      //   orderId: row.id,
      //   quantity: row.quantity,
      //   remark: row.remark,
      //   totalVolume: +row.editRow.totalVolume,
      //   totalWeight: +row.editRow.totalWeight,
      //   unit: row.unit,
      //   volume: row.volume,
      //   weight: row.weight
      // }, row.id)
      row.name = row.editRow.name
      row.goodsType.name = row.editRow.goodsTypename
      row.totalWeight = row.editRow.totalWeight
      row.totalVolume = row.editRow.totalVolume
      row.isEdit = false
      this.$message.success('修改成功')
    },
    // 删除
    del(row) {
      console.log(row)
      this.$confirm('确定要删除货品吗??', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await carGoDel(row.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getorderDetail()
      })
    },
    // 订单状态
    formatter(data) {
      const MAP = {
        '23000': '代取件',
        '23001': '已取件',
        '23002': '网点自寄',
        '23003': '网点入库',
        '23004': '待装车',
        '23005': '运输中',
        '23006': '网点出库',
        '23007': '带派送',
        '23008': '派送中',
        '23009': '已签收',
        '23010': '拒收',
        '23011': '已取消',
        'null,': '全部'
      }
      return MAP[data]
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './index.scss';
.dlast {
  margin-top: 35px;
}
.one {
  color: #8186a1;
  font-size: 15px;
  margin-left: 8px;
}
.fyxx {
  display: flex;
  div {
    width: 33%;
  }
}
.cardthree,
.cardfour,
.cardfive,
.cardsix,
.cardseven {
  width: 100%;
  // height: 500px;
  // border: 1px solid red;
  margin-bottom: 50px;
}
.elrowone {
  margin-bottom: 15px;
  margin-top: 15px;
}
.edit-order {
  padding: 23px 20px 20px 20px;
}
.box-card {
  padding: 25px 0 25px 44px;
  margin-bottom: 40px;
}
.divflex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  div {
    width: 25%;
  }
}
.one {
  margin-bottom: 30px;
}
::v-deep .el-collapse-item__content {
  padding: 24px 44px 24px 44px;
}
.d1,
.d2 {
  margin-bottom: 50px;
}
::v-deep .el-row {
  padding-left: 46px;
}
.cardtwo {
  padding-bottom: 20px;
  line-height: 30px;
  font-size: 30px;
  margin-bottom: 30px;
  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}
.qjxx {
  display: flex;
  height: 150px;
  align-items: center;
  flex-wrap: wrap;
}
.qjxx > div {
  width: 25%;
}

.qjxx > div span:last-child,
.fyxx > div span:last-child {
  color: #8186a1;
  margin-left: 8px;
}
.money {
  color: #ffb902 !important;
  margin-right: 8px;
  font-size: 16px;
}
</style>

